<template>
  <div class="common-layout">
    <el-backtop :right="100" :bottom="100" />
    <el-container class="main-container">
      <!-- 展示项目头部图片 -->
      <el-header class="main-header">
        <el-page-header @back="this.$router.go(-1)" class="page-header">
          <template #content>
            <span class="text-large font-600 mr-3"> 返回上一页 </span>
          </template>
        </el-page-header>
        <el-image class="header-image" :src="project.photo" fit="cover" />
      </el-header>
      <!-- 展示项目 -->
      <el-container class="detail-container">
        <el-header class="detail-header">
          <el-row :gutter="20">
            <el-col :span="16" class="detail-header-title"><h1>{{project.name}}</h1></el-col>
            <el-col :span="4">
              <h1>项目简介：</h1>
              <p>{{project.synopsis}}</p>
              <h1>目标金额：</h1>
              <p>{{project.target}}￥</p>
            </el-col>
            <el-col :span="4">
              <p>已募集：{{project.amount}}￥</p>
              <el-popover :visible="visible" placement="bottom" :width="300">
                <div>
                  <p style="font-size: 18px; color: red;">打钱!!!!!</p>
                  <el-image src="src/assets/sendmoney.jpg" fit="cover" />
                  <el-input v-model="money" placeholder="请输入金额"></el-input>
                </div>
                <div style="text-align: right; margin: 0">
                  <el-button size="small" text @click="visible = false">取消</el-button>
                  <el-button size="small" type="primary" @click="supportProject(money)">
                    立即支持
                  </el-button>
                </div>
                <template #reference>
                  <el-button @click="visible = true">支持</el-button>
                </template>
              </el-popover>
            </el-col>
          </el-row>
        </el-header>
        <!-- 展示项目内容 -->
        <el-container class="detail-main">
          <el-main class="detail-main-content">
            <div class="separator"></div>
            <!-- 自己编写的项目内容 -->
            <div v-html="project.content"></div>
          </el-main>
          <el-footer class="detail-footer">
            <!-- 展示评论 -->
            <Comment :projectId=this.$route.query.id />
          </el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import Comment from '@/components/Comment.vue';
import { ElMessage } from 'element-plus';
export default {
  name: 'ProjectDetail',
  data() {
    return {
      id: this.$route.query.id,
      money: 0, // 默认值为0
      visible: false, // 控制popover的显示
    };
  },
  computed: {
    ...mapState('OneProject', ['project']),
  },
  methods: {
    ...mapActions('OneProject', ['getOneProject']),
    ...mapActions('Contribution',['addContribution']),
    ...mapMutations('OneProject', ['supportMoney']),
    getItems() {
      this.getOneProject(this.id)
    },
    // 赞助项目
    async supportProject(money) {
      this.supportMoney(parseFloat(money));
      // this.collectMoneys({pid: this.id, money: this.project.amount});
      // 这里调用/contribution/add接口，输入pid,uid,money就能实现项目资金支持
      const data={
        pid: this.id,
        uid:JSON.parse(localStorage.getItem('User')).userid,
        amount:money
      }
      const res=await this.addContribution(data);
      this.visible = false
      ElMessage.success('感谢您的支持！');
      this.money = 0;
    },

  },
  created() {
    this.getItems();
  },
  components: {
    Comment,
  },
};
</script>

<style scoped>
.common-layout {
  margin: auto 10%;
  background-color: #f5f5f5;
  position: relative; /* 为后代定位提供相对参考 */
  border-radius: 10px;
}

.header-image {
  width: 100%;
  height: 400px;
  filter: blur(5px); /* 添加虚化效果 */
}

.page-header {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 50px;
  font-size: 40px;
  background-color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
}

.detail-container {
  border-radius: 20px;
  margin: 350px 20px 10px 20px;
  background-color: #fff;
}

.detail-header {
  margin: 0 20px 100px 20px;
  text-align: center;
}

.detail-header-title {
  font-size: 30px;
  font-weight: bold;
}

.detail-main-content {
  margin: 10px 50px;
}
</style>
